<template>
  <basic-container>
    <h3>机器列表</h3>
    <avue-crud :option="option" :data="data" @refresh-change="refreshChange" @row-save="rowSave" @on-load="onLoad" :page="searchForm" :table-loading="tableLoading">
      <template slot="ip" slot-scope="scope">
        <span>{{ scope.row.VpcAttributes && scope.row.VpcAttributes.PrivateIpAddress.IpAddress[0] }}</span>
      </template>
      <template slot="eip" slot-scope="scope">
        <span>{{ scope.row.EipAddress.IpAddress }}</span>
      </template>
      <template slot="menu" slot-scope="{ row, size, type }">
        <!--el-button @click="update(row)" :size="size" :type="type">修改</el-button-->
        <el-button @click="open(row)" :size="size" :type="type">编辑</el-button>
        <el-button @click="start(row)" :size="size" :type="type">启动</el-button>
        <el-button @click="stop(row)" :size="size" :type="type">停止</el-button>
        <el-button @click="delet(row)" :size="size" :type="type">删除</el-button>
      </template>
    </avue-crud>

    <el-dialog title="编辑" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <avue-form ref="form" v-model="obj" :option="option1" @reset-change="emptytChange" @submit="handleSubmit">
        <!--template slot-scope="scope" slot="menuForm">
          <el-button @click="tip">修改</el-button>
        </template-->
      </avue-form>
    </el-dialog>
  </basic-container>
</template>

<script>
import { option } from "./server-option.js";
import { getServerList, getServerSet, delServer, addServer, updateServer, startServer, stopServer } from "@/api/sever.js";
export default {
  data() {
    return {
      option,
      option1: {
        column: [
          {
            label: "实例id",
            prop: "InstanceId",
            tip: "不可修改",
            disabled: true,
          },
          {
            label: "名称",
            prop: "InstanceName",
            tip: "自定义名称",
          },
        ]
      },
      data: [],
      config: [],
      tableLoading: true,
      searchForm: {
        total: 0,
        indexPage: 1,
        pageSize: 20
      },
      dialogVisible: false,
      obj: {}
    };
  },
  methods: {
    onLoad(page) {
      this.searchForm.indexPage = page.currentPage;
      this.searchForm.currentPage = page.currentPage;
      this.searchForm.pageSize = page.pageSize;
      this.templateList();
    },
    async templateList() {
      try {
        const res = await getServerList();
        this.tableLoading = false;
        this.data = res.data;
      } catch (error) {
        console.log(error);
      }
    },
    refreshChange() {
      this.templateList();
    },
    async rowSave(form, done, loading) {
      try {
        const xxx = await addServer(form);
        setTimeout(()=>{
          loading();
        },1000)
        done(form);
        this.$message.success("实例添加成功");
        this.templateList();
        console.log(xxx);
      } catch (error) {
        this.$message.error("实例添加失败");
        console.log(error);
        loading();
        done();
      }
      console.log(form);
      console.log(done);
      console.log(loading);

      // this.$message.success('模拟网络请求')
      // setTimeout(()=>{
      //   this.$message.success('关闭按钮等待');
      //   loading();
      // },1000)
      // setTimeout(()=>{
      //   this.$message.success('新增数据'+ JSON.stringify(form));
      //   done(form);
      // },2000)
    },
    async lock(row, index) {
      try {
        const data = {
          Status: row.Status === "Running" ? "Stoping" : "Running"
        };
        const xxx = await getServerSet(data);
        this.$message.success("添加成功");
        this.templateList();
        console.log(xxx);
      } catch (error) {
        this.$message.error("保存失败");
        console.log(error);
      }
      console.log(row);
      console.log(index);
    },

    async update(row, index) {
      try {
        const data = {
          InstanceId: row.InstanceId,
          InstanceName: row.InstanceName
        };
        const xxx = await updateServer(data);
        this.$message.success("修改成功");
        this.templateList();
        console.log(xxx);
      } catch (error) {
        this.$message.error("修改失败");
        console.log(error);
      }
      console.log(row);
      console.log(index);
    },

    async delet(row, index) {
      try {
        const data = {
          InstanceId: row.InstanceId
        };
        const zzz = await delServer(data);
        this.$message.success("删除成功");
        this.templateList();
        console.log(zzz);
      } catch (error) {
        this.$message.error("删除失败");
        console.log(error);
      }
      console.log(row);
      console.log(index);
    },

    async start(row, index) {
      try {
        const data = {
          InstanceId: row.InstanceId
        };
        const start = await startServer(data);
        this.$message.success("启动成功");
        this.templateList();
        console.log(start);
      } catch (error) {
        this.$message.error("启动失败");
        console.log(error);
      }
      console.log(row);
      console.log(index);
    },

    async stop(row, index) {
      try {
        const data = {
          InstanceId: row.InstanceId
        };
        const stop = await stopServer(data);
        this.$message.success("停止成功");
        this.templateList();
        console.log(stop);
      } catch (error) {
        this.$message.error("停止失败");
        console.log(error);
      }
      console.log(row);
      console.log(index);
    },

    // ===== 弹窗
    open(row) {
      // this.obj = row;
      this.dialogVisible = true;
      console.log(row);
      this.obj = {
        InstanceId: row.InstanceId,
        Status: row.Status,
      };
    },
    handleClose() {
      this.dialogVisible = false;
    },
    emptytChange() {
      this.$message.success("已清空");
    },
    handleSubmit(from, done) {
      this.update(this.obj);
      console.log(from);
      setTimeout(() => {
        done();
      }, 500);
      this.handleClose();
      // this.$message.success("当前数据nnn" + JSON.stringify(this.obj));
    }
    // tip() {
    //   this.$message.success("自定义按钮");
    // }
  }
};
</script>

<style scoped></style>
